<!--
 * @Author: your name
 * @Date: 2021-08-31 12:17:34
 * @LastEditTime: 2021-09-04 17:38:58
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \index\src\views\GoodMood.vue
-->

<template>
  <div id="goodMoodContainer">
    <header id="header">
       <!-- v-bind:style="{ color: layout.iconColor[color]}" -->
      <svg class="icon" aria-hidden="true" >
        <use xlink:href="#icon-Happy-Wink"></use>       
      </svg>
    </header>
    <main id="main">
      <template v-if="!pageStatus.personStatus">
        <MineMood class="mood-item"></MineMood>
      </template>
      <template v-if="pageStatus.personStatus">
        <YoursMood class="mood-item"></YoursMood>
      </template>
    </main>
    <footer id="footer">
      <div id="footer-line" @click="changeMoodStatus">缓解下心情</div>
    </footer>
  </div>
</template>

<script>
import "@/assets/font/ali/iconfont.js";
import  MineMood from "@/components/GoodMood/mineMood.vue"
import  YoursMood from "@/components/GoodMood/yoursMood.vue"
export default {
  components: {
   MineMood,
   YoursMood
  },
  data: function() {
    return {
      pageStatus: {
        moodStatus: 0,
        personStatus: false,
      },
      layout: {
        iconColor: {
          'happy': '#bfa',
          'happy2': '#ddd',
        },
        iconColorNumber: 2,
        musicColorRelated: {
          'happy': [

          ],
          'happy2': [
            
          ]
        },
        mineMoods: [
          "喜",
          "怒",
          "哀",
          "乐"
        ]
      }

    }
  },
  methods: {
    changeMoodStatus: function() {
      if(this.pageStatus.personStatus) {
        this.pageStatus.moodStatus += 1;
        const chooseWhichColor = this.pageStatus.moodStatus % this.layout.iconColorNumber;
        const chooseColor = this.layout.iconColor;
        console.log(chooseWhichColor);
        for (const key in chooseColor) {
          if (Object.hasOwnProperty.call(chooseColor, key)) {
            // const element = object[key];
          }
        }
      }
      else {
        this.pageStatus.personStatus = true;  
      }  
    }
  }
};
</script>
<style scoped lang="scss">
.icon {
  width: 3rem;
  height: 3rem;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
  /* color: red; */
}

#goodMoodContainer {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  #header {
    height: 30%;
    svg {
      height: 100%;
      width: 100%;
    }
    svg:hover {
      color: red;
    }
  }
  #main {
    height: 50%;
    width: 100%;
    #reminder {
      text-align: center;
      padding: 8px 0 10px 0;
    }
    #reminder:hover {
      color: blue;
    }
    .mood-item {
      font-family: "方正";
      line-height: 25px;
      width: 95%;
      margin: 0 auto;
    }
    #second-line {
      // height: 50%;
      width: 98%;
      // margin: 5px auto;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      // background: #bfa;
      // padding: 
    }
  }
  #footer {
    height: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    #footer-line {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 1.2rem;
      color: #116fd8;
      width: 90%;
      margin: 0 auto;
      padding: 10px;
      border: 1px solid #e1e4e8;
      border-radius: 5px;
    }
  }
}
</style>